<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>ontrack</title>

    <!-- Logo -->
    <link rel="icon" type="image/png" href="assets/logo-64.png">

    <!-- CSS includes -->
    <!-- inject:css -->
    <!-- endinject -->

    <!-- JS includes -->
    <!-- inject:js -->
    <!-- endinject -->

</head>
<body ng-cloak ng-controller="AppCtrl">

<div>

    <!-- Header and menu -->

    <nav class="navbar navbar-default navbar-inverse" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#/">
                    <img class="ot-logo" src="assets/logo-24.png"/>
                    ontrack
                </a>
            </div>
            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav navbar-right">

                    <!-- Application info messages -->

                    <li class="dropdown"
                        title="Application messages">
                        <a href="#" ng-click="loadApplicationInfo()">
                            <span class="ot-application-info"></span>
                        </a>
                    </li>

                    <!-- User menu: not logged -->
                    <li class="dropdown" ng-show="!logged()">
                        <!-- Login link -->
                        <a ng-click="login()">Sign in</a>
                    </li>
                    <!-- User menu: logged -->
                    <li class="dropdown" ng-show="logged()">
                        <a id="header-user-menu" href="#" class="dropdown-toggle" data-toggle="dropdown">
                            {{user.account.fullName}}
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <!-- Filter box -->
                            <li class="user-menu-filter" onclick="event.stopPropagation();">
                                <div class="input-group">
                                    <span class="input-group-addon" id="user-menu-filter-addon">
                                        <span class="fa fa-search"></span>
                                    </span>
                                    <input type="text"
                                           ng-model="userMenuFilter"
                                           placeholder="Search in the list"
                                           aria-describedby="user-menu-filter-addon"
                                           class="form-control"
                                           />
                                </div>
                            </li>
                            <!-- All actions -->
                            <li ng-repeat="action in user.actions | orderBy: 'name' | filter:{name: userMenuFilter}">
                                <a ng-if="action.type == 'LINK'" id="{{action.id}}-link" href="#{{action.uri}}">{{action.name}}</a>
                                <a ng-if="action.type == 'FORM'" id="{{action.id}}-form" ng-click="showActionForm(action)">{{action.name}}</a>
                            </li>
                            <!-- Logout -->
                            <li>
                                <a id="user-logout" ng-click="logout()">Sign out</a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <!-- Search box -->
                <form class="navbar-form navbar-right" ng-submit="search(searchToken)">
                    <input type="text" class="form-control" placeholder="Search..." ng-model="searchToken">
                </form>

                <!-- Loading indicator -->
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a
                                ng-show="currentCalls"
                                class="ot-loading-indicator" title="Loading elements... {{currentCalls}}"></a>
                    </li>
                </ul>


            </div>
        </div>
    </nav>

    <!-- Notification section -->

    <div class="container-fluid" ng-if="hasNotification()">
        <div class="ot-notification-{{notificationType()}}">
            <button type="button" class="close" ng-click="closeNotification()">&times;</button>
            <span>{{notificationContent()}}</span>
        </div>
    </div>

    <!-- Loading mask -->

    <div id="ontrack-loading" class="container-fluid" ng-show="!appReady && !appLoadingError">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-info">
                    <span class="ot-loading-indicator"></span>
                    Ontrack is loading its components and will be available shortly...
                </div>
            </div>
        </div>
    </div>

    <!-- Loading error -->

    <div id="ontrack-loading-error" class="container-fluid" ng-show="appLoadingError">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-danger">
                    <p>
                        Ontrack application could not be loaded.
                    </p>
                    <p>
                        <code>{{appLoadingError}}</code>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- View container -->

    <div id="ontrack-view" ng-show="appReady" ui-view>
    </div>

    <!-- Footer and version information -->

    <footer class="ot-footer">
        <div class="container-fluid">
            <div class="ot-footer-inner">
                <p>
                    <!-- Displays a popup with information version and a link to ontrack -->
                    <span class="ot-version" ng-click="displayVersionInfo(info)">
                        {{info.version.display}}
                    </span>
                    <span ng-if="info.version.sourceType == 'release'" class="ot-version-label ot-version-release">
                        Release
                    </span>
                    <span ng-if="info.version.sourceType != 'release'" class="ot-version-label ot-version-warning"
                          title="This version is not a release! Please use with care.">
                        <span class="fa fa-warning"></span>
                    </span>
                </p>
            </div>
        </div>
    </footer>

</div>

</body>
</html>
